<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动遮罩层</title>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="box">
        <ul>
            <li>
                <img src="img/1.jpg" width="164" height="220" alt="#">
                <div class="text">
                    <h2>杏鲍菇培根卷</h2>
                    <p>给大家带来一道喜庆点的菜，杏鲍菇培根卷.美味的杏鲍菇和培根都是饕餮精品</p>
                    <span class="btn"><a href="#" target="_blank">点击查看</a></span>
                </div>
            </li>
            <li>
                <img src="img/2.jpg" width="164" height="220" alt="#">
                <div class="text">
                    <h2>牙签肉</h2>
                    <p>肉切合适大小的块，加生抽，盐，花椒粉用手抓匀，腌制30分钟。</p>
                    <span class="btn"><a href="#" target="_blank">点击查看</a></span>
                </div>
            </li>
            <li>
                <img src="img/3.jpg" width="164" height="220" alt="#">
                <div class="text">
                    <h2>豆腐卷</h2>
                    <p>方这边吃豆腐卷是很多的，对于自己来说，隔几天不吃就会馋得慌.</p>
                    <span class="btn"><a href="#" target="_blank">点击查看</a></span>
                </div>
            </li>
            <li>
                <img src="img/4.jpg" width="164" height="220" alt="#">
                <div class="text">
                    <h2>南瓜煲</h2>
                    <p>菜品特色，粥约会糯，味鲜咸清香，属 利尿食谱 老人食谱 糖尿病食谱 贫血食谱</p>
                    <span class="btn"><a href="#" target="_blank">点击查看</a></span>
                </div>
            </li>
            <li>
                <img src="img/5.jpg" width="164" height="220" alt="#">
                <div class="text">
                    <h2>皮蛋拌豆腐</h2>
                    <p>健康功效香菜：健胃、透疹、增强免疫力 豆腐：清热泻火、益气、解毒</p>
                    <span class="btn"><a href="#" target="_blank">点击查看</a></span>
                </div>
            </li>
            <li>
                <img src="img/6.jpg" width="164" height="220" alt="#">
                <div class="text">
                    <h2>红烧鲤鱼</h2>
                    <p>无论是海鱼还是淡水鱼,家常红烧的做法大同小异,本次用到的海鱼,叫不上名字,不是当地常见的海鱼.</p>
                    <span class="btn"><a href="#" target="_blank">点击查看</a></span>
                </div>
            </li>
            <li>
                <img src="img/7.jpg" width="164" height="220" alt="#">
                <div class="text">
                    <h2>红烧茄子</h2>
                    <p>烧茄子是我个人比较喜欢的一道菜,但每次做都很难做出餐馆里那种咸鲜回甜,酱香浓郁,色泽美观的烧茄子。</p>
                    <span class="btn"><a href="#" target="_blank">点击查看</a></span>
                </div>
            </li>
            <li>
                <img src="img/8.jpg" width="164" height="220" alt="#">
                <div class="text">
                    <h2>凉拌西蓝花</h2>
                    <p>凉拌西兰花灿灿烂烂,新的一周又开始了,迎着明媚的阳光,灿烂上菜菜啦!</p>
                    <span class="btn"><a href="#" target="_blank">点击查看</a></span>
                </div>
            </li>
            <li>
                <img src="img/1.jpg" width="164" height="220" alt="#">
                <div class="text">
                    <h2>杏鲍菇培根卷</h2>
                    <p>给大家带来一道喜庆点的菜，杏鲍菇培根卷.美味的杏鲍菇和培根都是饕餮精品</p>
                    <span class="btn"><a href="#" target="_blank">点击查看</a></span>
                </div>
            </li>
            <li>
                <img src="img/2.jpg" width="164" height="220" alt="#">
                <div class="text">
                    <h2>牙签肉</h2>
                    <p>肉切合适大小的块，加生抽，盐，花椒粉用手抓匀，腌制30分钟。</p>
                    <span class="btn"><a href="#" target="_blank">点击查看</a></span>
                </div>
            </li>
            <li>
                <img src="img/3.jpg" width="164" height="220" alt="#">
                <div class="text">
                    <h2>豆腐卷</h2>
                    <p>方这边吃豆腐卷是很多的，对于自己来说，隔几天不吃就会馋得慌.</p>
                    <span class="btn"><a href="#" target="_blank">点击查看</a></span>
                </div>
            </li>
            <li>
                <img src="img/4.jpg" width="164" height="220" alt="#">
                <div class="text">
                    <h2>南瓜煲</h2>
                    <p>菜品特色，粥约会糯，味鲜咸清香，属 利尿食谱 老人食谱 糖尿病食谱 贫血食谱</p>
                    <span class="btn"><a href="#" target="_blank">点击查看</a></span>
                </div>
            </li>
        </ul>
    </div>
    <script src="./animation.js"></script>
    <script src="./index.js"></script>
</body>
</html>